<template>
  <div>
    <div v-if="!showSkeleton" style="padding-top: 5px">
      <widget-grid class="widget-panel-grid widget-panel-grid--fix-width"
                   :widgets="widgets"
                   ref="widgetGridPanel">
      </widget-grid>
    </div>
  </div>
</template>

<script>

import { cloneDeep } from 'lodash'
import { defineAsyncComponent } from 'vue'

export default {
  name: 'TheWidgetGridPanel',
  components: {
    // WidgetGrid: () => import('pages/workbench/components/WidgetGrid.vue'),
    WidgetGrid: defineAsyncComponent(() => import('pages/workbench/components/WidgetGrid.vue'))
  },
  props: {
    id: String
  },
  data () {
    return {
      showSkeleton: true,
      fabShow: false,
      widgets: []
    }
  },
  computed: {
    float () {
      return this.$store.state.widget.options.float
    }
  },
  watch: {
    '$store.state.widget.widgets': {
      handler (newWidgets) {
        // console.log('watch newWidgets', newWidgets, this.id)
        if (this.$store.state.currentWorkbenchId === this.id) {
          this.widgets = cloneDeep(newWidgets)
        }
      },
      immediate: true,
      deep: true
    }
  },
  async mounted () {
    this.showSkeleton = false
  },
  methods: {
    clearAllAps () {
      this.$q.dialog({
        title: '警告',
        message: '是否确认要清除自定义应用、重置布局与各项配置？',
        cancel: true,
        persistent: true
      }).onOk(async () => {
        this.$store.commit('widget/setApps', [])
        this.$store.commit('widget/setWidgets', [])
        this.$store.commit('widget/setOptions', {})
        this.$store.commit('workbench/setOptions', {})
        await this.$store.dispatch('storeSave')
        location.reload()
      })
    },
    async switchFloat () {
      this.$store.commit('widget/setOptions', {
        ...this.$store.state.widget.options,
        float: !this.float
      })
      await this.$store.dispatch('storeSave')
    }
  }
}
</script>

<style lang="scss" scoped>
.widget-panel-grid {
  padding-bottom: 60px;

  &--fix-width {
    width: 1160px;
    //width: calc(100% - 5%);
    margin: 0 auto
  }
}
</style>
